<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row>
        <el-col>
          <el-form-item label="店铺名称" prop="shopName">
            <el-input v-model="form.shopName" placeholder="请输入店铺名称" maxlength="30" show-word-limit class="width300" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="店铺头像" prop="shopAvatar">
            <ImageUpload v-model="form.shopAvatar" :limit="1" :file-size="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="店铺描述" prop="shopDescription">
            <el-input v-model="form.shopDescription" placeholder="请输入店铺描述" maxlength="120" type="textarea" class="width300" :rows="3" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="金额单位" prop="shopUnit">
            <div class="flex-align-center">
              <el-input v-model="form.shopUnit" placeholder="请输入金额单位" maxlength="4" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10">前台所用单位</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客服二维码" prop="serverCode">
            <ImageUpload v-model="form.serverCode" :limit="1" :file-size="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="客服微信号" prop="serverWxId">
            <el-input v-model="form.serverWxId" placeholder="请输入客服微信号" maxlength="30" show-word-limit class="width300" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>
  </div>
</template>

<script>

import { getConfigBase, saveConfigBase } from "@/api/market/configBase";
export default {
  name: 'ConfigBase',
  components: {

  },
  data() {
    return {
      // 表单参数
      form: {
        shopId: "",
        shopName: "",
        shopUnit: "",
        shopDescription: "",
        shopAvatar: "",
        serverCode: "",
        serverWxId: "",
      },
      // 表单校验
      rules: {
      }
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      let shopId = 'haidiyao'
      getConfigBase({shopId: shopId}).then(response => {
        if(response.data){
          this.form = response.data;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: "",
        shopName: "",
        shopUnit: "",
        shopDescription: "",
        shopAvatar: "",
        serverCode: "",
        serverWxId: "",
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if(process.env.NODE_ENV === 'development'){
            params.shopId = 'haidiyao'
          }else{
            params.shopId = window.location.hostname.split(".")[0];
          }
          saveConfigBase(params).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.width300{
  width: 300px;
}
</style>
